<template>
    <view class="u-margin-top-20">
        <!-- 分类 -->
        <view>
            <view class="title">{{ title || '' }}</view>
            <view class="content">
                <view class="u-flex u-flex-wrap" v-if="muti">
                    <view v-for="(item, index) in list" :key="index" class="item servers n3" @click="check(index)" :class="{ square: square, actived: idxs.indexOf(index) > -1 }">
                        {{ item.name }}
                    </view>
                </view>
                <view v-else v-for="(item, index) in list" :key="index" class="item n3" @click="handleChange(index)" :class="{ square: square, actived: index == idx }">
                    {{ item.name }}
                </view>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { onReady } from '@dcloudio/uni-app';
import { ref } from 'vue'

interface T {
    title?: string
    list?: Array<any>
    muti?: boolean
    square?: boolean
    /** 预设值 数组 多选时 */
    selectArr?: Array<any>
    /** 预设值 单选时 */
    select?: number | undefined
}

const Prop = withDefaults(defineProps<T>(), {
    title: '标题',
    list: () => [],
    muti: false,
    square: false,
    selectArr: () => [],
    select: undefined
})

const idx = ref(-1)
const idxs = ref<Array<any>>([])

const emit = defineEmits(['select'])

function handleChange(n: number) {
    idx.value = n
    if (n > -1) {
        emit('select', Prop.list[n].id)
    } else {
        emit('select')
    }
}

function check(n: number) {
    if (idxs.value.indexOf(n) > -1) {
        idxs.value = idxs.value.filter(m => m != n)
    } else {
        idxs.value.push(n)
    }
    let res: Array<any> = []
    idxs.value.forEach(m => {
        if (Prop.list[m].children) {
            Prop.list[m].children.map((child: any) => {
                res.push(child.id)
            })
        } else {
            res.push(Prop.list[m].id)
        }
    })
    emit('select', res, idxs)
}

function reset() {
    idx.value = -1
    idxs.value = []
}

defineExpose({reset})

onReady(()=>{
    if (Prop.selectArr.length > 0) {
        idxs.value = Prop.selectArr
    }
})

</script>

<style scoped lang="scss">
.content {
        margin-top: 37rpx;
        display: flex;
        flex-wrap: wrap;
        // justify-content: space-between;

        .title {
            font-size: 30rpx;
            font-weight: 600;
            color: #333333;
        }

        .item {
            width: calc((100% - 20rpx)/3);
            margin-right: 10rpx;
            height: 70rpx;
            background: #eeeeee;
            border-radius: 35rpx;
            color: #666666;
            text-align: center;
            line-height: 70rpx;
            margin-bottom: 18rpx;
        }

        .servers {
            font-size: 26rpx;
        }

        .square {
            background: #eeeeee;
            border-radius: 10rpx;
        }

        .actived {
            background: #ffffff !important;
            border: 2rpx solid $cf-primary;
            color: $cf-primary;
        }

        .n3:nth-child(3n+0) {
            margin-right: 0rpx;
        }
    }
</style>
